//详情弹窗
<template>
  <el-dialog
    :title="title"
    custom-class="dialogStyle1 detailsPopup"
    :close-on-click-modal="false"
    :append-to-body="true"
    :visible.sync="show"
  >
    <el-form ref="form" :model="form" label-width="100px" v-if="form">
      <el-form-item label="电子健康卡ID:">
        <el-input v-model="form.ehealthCardId" :disabled="isLook"></el-input>
      </el-form-item>
      <el-form-item label="证件号:">
        <el-input v-model="form.idNo" disabled></el-input>
      </el-form-item>
      <el-form-item label="用户姓名:">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="用户性别:">
        <el-select v-model="form.sex" style="width:100%;" :disabled="isLook" @change="changeSex">
          <el-option v-for="item in sexs" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="出生日期:">
        <el-input :value="time(form.birthday)" disabled></el-input>
      </el-form-item>
      <el-form-item label="手机号码:">
        <el-input v-model="form.cellphone" :disabled="isLook"></el-input>
      </el-form-item>
      <el-form-item label="联系电话:">
        <el-input :value="telephone(form.telephone)" disabled></el-input>
      </el-form-item>
      <el-form-item label="创建时间:">
        <el-input :value="time(form.createTime)" disabled></el-input>
      </el-form-item>
      <el-form-item label="修改时间:">
        <el-input :value="time(form.editeTime)" disabled></el-input>
      </el-form-item>
      <el-form-item label="申请单位:">
        <el-input :value="unit(form.unit)" disabled></el-input>
      </el-form-item>
      <el-form-item label="申请机构:">
        <el-input v-model="form.orgName" disabled></el-input>
      </el-form-item>
      <el-form-item v-if="!isLook" style="text-align:center;padding-right:50px;">
        <el-button size="medium" type="success" @click.stop="change" :loading="changeLoading">确认修改</el-button>
        <el-button size="medium" @click.stop="delUser" :loading="delLoading">注销用户</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<script>
import store from "@/store";
import { getFormatTime, notify } from "@/utils/index";
import { isvalidPhone } from "@/utils/validate";
import { changeUserNews, delUser } from "@/api/users";
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      show: false,
      form: null,
      isLook: true,
      sexValue: null,
      changeLoading: false,
      delLoading: false
    };
  },
  computed: {
    ...mapGetters("parameter/", ["sexs"]),
    title() {
      return this.isLook ? "查看用户详情" : "修改用户信息";
    }
  },
  methods: {
    gender(val) {
      return val ? parseInt(val) : 0;
    },
    sex(val) {
      return val == 1 ? "男" : "女";
    },
    time(val) {
      return val ? getFormatTime(parseInt(val)) : "---";
    },
    unit(val) {
      return val ? val : "---";
    },
    telephone(val) {
      return val ? val : "---";
    },
    changeSex(val) {
      this.sexValue = val;
    },
    delUser() {
      this.$confirm("确定注销该用户?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "success"
      })
        .then(() => {
          this.delLoading = true;
          delUser({
            idcard: this.form.idNo,
            ehealthCardId: this.form.ehealthCardId
          })
            .then(res => {
              console.log(res)
              this.delLoading = false;
              if (res.code === 10000) {
                notify("注销成功", "success", "成功", 800);
                this.$emit("update");
              } else {
                notify(res.message, "error", "失败", 800);
              }
            })
            .catch(err => {
              console.log(err);
              this.delLoading = false;
            });
        })
        .catch(err => {
          console.log(err);
        });
    },
    //确认修改
    change() {
      if (this.changeLoading) return false;
      if (!isvalidPhone(this.form.cellphone)) {
        notify("请输入正确的电话号码", "error", "失败");
        return false;
      }
      let data = {
        idNo: this.form.idNo,
        ehealthCardId: this.form.ehealthCardId,
        gender: this.sexValue ? this.sexValue : this.form.gender,
        cellphone: this.form.cellphone,
        name:this.form.name
      };
      this.changeLoading = true;
      changeUserNews(data)
        .then(res => {
          if (res.code === 10000) {
            notify("修改成功", "success", "成功", 800);
            this.$emit("update");
          } else {
            notify(res.message, "error", "失败", 800);
          }
          this.changeLoading = false;
        })
        .catch(err => {
          this.changeLoading = false;
        });
    }
  }
};
</script>
<style lang='scss' scoped>
@import "~@/assets/styles/dialog.scss";
/deep/ .detailsPopup {
  width: 750px;
}
</style>